<!-- 员工详情 -->
<template>
  <div class="page-container">
    <a-tabs v-model:active-key="activeType">
      <a-tab-pane key="1" title="员工信息">
        <card title="员工信息">
          <a-descriptions :size="'medium'" :align="{ label: 'right' }">
            <a-descriptions-item label="所属机构">{{ staffData.organizationName }}</a-descriptions-item>
            <a-descriptions-item label="员工姓名">{{ staffData.realname }}</a-descriptions-item>
            <a-descriptions-item label="员工手机号">{{ staffData.phone }}</a-descriptions-item>
            <a-descriptions-item label="登录名">{{ staffData.username }}</a-descriptions-item>
            <a-descriptions-item label="员工岗位">{{ staffData.staffPostName }}</a-descriptions-item>
            <a-descriptions-item label="员工身份证号">{{ staffData.identityCard }}</a-descriptions-item>
            <a-descriptions-item label="员工类型">{{ staffData.staffTypeName }}</a-descriptions-item>
            <a-descriptions-item label="员工状态">{{ staffData.statusName }}</a-descriptions-item>
            <a-descriptions-item label="员工邮箱">{{ staffData.email }}</a-descriptions-item>
            <a-descriptions-item label="员工角色" :span="3">{{ formatAuthOrgNames(staffData.roleNameList) }}</a-descriptions-item>
            <a-descriptions-item label="机构权限" :span="3">{{ formatAuthOrgNames(staffData.authOrgNames) }}</a-descriptions-item>
          </a-descriptions>
        </card>

        <!-- 银行账号 -->
        <BankAccountDetail :data="staffData.backInfoList" />
      </a-tab-pane>
      <a-tab-pane key="2" title="操作记录">
        <OperateLog :id="routePrams.id" type="9" />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script setup name="StaffDetail">
  import { ref, onMounted } from 'vue'
  import { staffDetail } from '@/api/organization/organization'
  import BankAccountDetail from '@/views/market/components/bank-account-detail.vue'
  import { useRoute } from 'vue-router'

  const route = useRoute()
  const routePrams = route.params
  const activeType = ref('1')
  const staffData = ref({})

  const getDetail = (id) => {
    staffDetail({ id }).then((res) => {
      const result = res.result
      staffData.value = result
    })
  }

  // 格式化机构权限
  const formatAuthOrgNames = (list) => {
    if (list && list.length > 0) {
      var newlistStr = list.toString()
      if (list.length > 1) {
        newlistStr = newlistStr.replace(/,/g, ' | ')
      }
      return newlistStr
    }
  }

  // mounted 调用接口
  onMounted(() => {
    const id = routePrams.id
    getDetail(id)
  })
</script>

<style lang="less" scoped>
  .basic-info-wrapper {
    .section-item {
      .section-item-header {
        color: #1d2129ff;
        font-weight: 600;
      }
      .section-item-content {
        padding: 20px 20px 0 20px;
        .basic-info {
          .car-info {
            margin-top: 14px;
            &.car-main-info {
              height: 28px;
              margin-top: 0;
              line-height: 28px;
            }
            .license-number {
              font-size: 20px;
              font-weight: 600;
              color: #1d2129;
              vertical-align: bottom;
            }
            .custom-tag {
              margin-left: 12px;
              padding: 0 10px;
              color: #1d2129ff;
              background: #f1f4fa;
              &.orange {
                background: #fff9e8;
                color: #e45800ff;
              }
            }
            .custom-tag + .custom-tag {
              margin-left: 16px;
            }
          }
        }
        .operate-list {
          width: 88px;
          .operate-btn + .operate-btn {
            margin-top: 16px;
          }
        }
      }
      &.gray {
        background-color: rgba(var(--gray-1), 0.5) !important;
        border-radius: 0px 0px 0px 0px;
        .section-item-content {
          padding: 20px 20px 12px 20px;
        }
      }
    }
    .section-item + .section-item {
      margin-top: 16px;
    }
  }
  .description-item {
    font-size: 14px;
    .description-item-label {
      color: var(--color-text-3);
    }
    .description-item-content {
      color: var(--color-text-1);
    }
  }
  .link {
    font-size: 14px;
    color: rgb(var(--primary-6));
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
</style>
